<template>
  <div class="table-title">
    <span>学生考试成绩</span>

    <el-dropdown trigger="click" @command="handleCommandExam" style="margin-left: 60px;">
      <span class="el-dropdown-link">
        考试：<span>{{ examVal }}</span>
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="item in semesterList" :key="item.id" :command="item.text">{{ item.text }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-dropdown trigger="click" @command="handleCommandSubject">
      <span class="el-dropdown-link">
        学科：<span>{{ subjectVal }}</span>
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="item in subjectList" :key="item.id" :command="item.text">{{ item.text }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-dropdown trigger="click" @command="handleCommandGrade">
      <span class="el-dropdown-link">
        年级：<span>{{ gradeVal }}</span>
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="item in gradeListInfo" :key="item.id" :command="item.text">{{ item.text }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-dropdown trigger="click" @command="handleCommandClass">
      <span class="el-dropdown-link">
        班级：<span>{{ classVal }}</span>
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="item in gradeList" :key="item.id" :command="item.name">{{ item.name }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <div class="btn-tag">
      <el-button-group>
        <el-button type="primary" size="small" :class="{ 'button-active': formIndex == 1 }" @click="formCut(1)">图表</el-button>
        <el-button type="primary" size="small" :class="{ 'button-active': formIndex == 2 }" @click="formCut(2)">表格</el-button>
      </el-button-group>
    </div>

    <el-button type="primary" plain size="small" @click="exportTableData()">导出表格</el-button>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "StudentMarkTable",
  components: {},
  data() {
    return {
      formIndex: 1,
      examVal: "",
      semesterList: [{
        id: 1,
        text: "2018-2019学年第一学期期末考试"
      }, {
        id: 2,
        text: "2018-2019学年第二学期期末考试"
      }, {
        id: 3,
        text: "2018-2019学年第三学期期末考试"
      }],
      subjectVal: "",
      subjectList: [{
        id: 1,
        text: "语文"
      }, {
        id: 2,
        text: "数学"
      }],
      gradeVal: "",
      gradeListInfo: [{
        id: 1,
        text: "年级一"
      }, {
        id: 2,
        text: "年级二"
      }],
      classVal: ""
    }
  },
  computed: {
    ...mapState(["gradeList"])
  },

  watch: {
    gradeList(val) {
      this.classVal = val[0].name;
    },

    semesterList(val) {
      this.examVal = val[0].text;
    },

    subjectList(val) {
      this.subjectVal = val[0].text;
    },

    gradeListInfo(val) {
      this.gradeVal = val[0].text;
    }
  },

  mounted() {
    this.examVal = this.semesterList[0].text;
    this.subjectVal = this.subjectList[0].text;
    this.gradeVal = this.gradeListInfo[0].text;
  },

  methods: {
    // 考试
    handleCommandExam(command) {
      this.examVal = command;
    },

    // 学科
    handleCommandSubject(command) {
      this.subjectVal = command;
    },

    // 年级
    handleCommandGrade(command) {
      this.gradeVal = command;
    },

    // 班级
    handleCommandClass(command) {
      this.classVal = command;
    },

    // 图表/表格切换
    formCut(num) {
      this.formIndex = num;
      this.$parent.cutDataType(4, num);
    },

    // 导出表格
    exportTableData() {

    }
  }
}
</script>

<style scoped lang="scss">
@import '../styles/variable';

.table-title{
  padding: 0 20px;
}

.btn-tag {
  .el-button-group {
    .el-button--primary {
      background: #ffffff;
      border-color: #DFE0E1;
      color: #666666;
      padding: 9px 12px;

      &:hover,
      &:focus,
      &.button-active {
        background: #ebf0ff;
        border-color: $default-color;
        color: $default-color;
      }

      &.button-active {
        margin-right: 0;
      }
    }
  }
}

.el-dropdown-link {
  cursor: pointer;
  color: #666666;
  font-size: 13px;

  &:hover .el-icon--right,
  &:hover span {
    color: $default-color;
  }
}
</style>
